<template>
	<el-card>
		<div class="account">
			<el-row :gutter="10" style="margin-bottom: 20px;">
				<el-col :span="24">
					<el-button type="primary" size="small" icon="el-icon-plus" @click="editHandle()">添加账号</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="3">
					<el-select v-model="value" placeholder="请选择运营人" size="small">
						<el-option v-for="item in options" :key="item.id" :label="item.username" :value="item.id">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3">
					<el-input v-model="search" placeholder="关键词" size="small"></el-input>
				</el-col>
				<el-col :span="3">
				
					<el-button size="mini" type="primary" @click="dosearch()">搜索</el-button>
				</el-col>
			</el-row>

			<!-- 表格 -->
			<el-table class="custom-table" ref="multipleTable" :data="tableData" tooltip-effect="dark"
				style="width: 100%" :header-cell-class-name="headerCellClass" :cell-class-name="cellStyle">
				<el-table-column label="序号" width="80">
					<template slot-scope="scope"> {{ scope.$index + 1 }}</template>
				</el-table-column>
				<el-table-column label="账号" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.username }}</span>
					</template>
				</el-table-column>
				<el-table-column  label="账号类型">
					<template slot-scope="scope">
						<span>{{ scope.row.user_type_str }}</span>
					</template>
				</el-table-column>
				<el-table-column label="所属上级">
					<template slot-scope="scope">
						<span>{{ scope.row.operate_user }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="editHandle(scope.row.id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="deleHandle(scope.row.id)">删除</el-button>
					</template>
					<!-- <template slot>
						<el-button type="primary" size="mini" @click="editHandle(123)">编辑</el-button>
						<el-button type="danger" size="mini" @click="deleHandle(123)">删除</el-button>
					</template> -->
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="custom-pagination">
				<el-pagination background layout="prev, pager, next,sizes" :total="total" @current-change="pageChange"
					@size-change="handleSizeChange" :page-size="pagesize" :page-sizes="[10, 20, 50, 100]">
				</el-pagination>
			</div>

			<!--  弹窗 -->
			<edit-account v-if="showModal" ref="myModal" @refreshDataList="refreshDataList"></edit-account>
		</div>
	</el-card>
</template>

<script>
	import EditAccount from "./components/EditAccount.vue";

	export default {
		components: {
			EditAccount
		},
		data() {
			return {
				page: 1, // 当前页码
				pagesize: 10, // 当前条数
				total: 0, // 总条数
				showModal: false, // 显示弹窗
				options: [
				// 	{
				// 	id: '选项1',
				// 	username: '黄金糕'
				// }
				],
				value: '',
				search: '',
				tableData: [
				// 	{
				// 	date: '2016-05-03',
				// 	name: 'admin1313213',
				// 	address: '运营专员'
				// }, {
				// 	date: '2016-05-02',
				// 	name: 'admin1313',
				// 	address: '运营专员'
				// }, {
				// 	date: '2016-05-04',
				// 	name: 'admin',
				// 	address: '运营专员'
				// }, {
				// 	date: '2016-05-01',
				// 	name: 'admin',
				// 	address: '运营专员'
				// }, {
				// 	date: '2016-05-08',
				// 	name: 'admin',
				// 	address: '运营专员'
				// }, {
				// 	date: '2016-05-06',
				// 	name: 'admin',
				// 	address: '运营专员'
				// }, {
				// 	date: '2016-05-07',
				// 	name: 'admin',
				// 	address: '运营专员'
				// }
				],
			}
		},
		mounted() {
            this.loadData();
			this.get_list();
			this.get_operateuers();
        },
		methods: {
			headerCellClass() { // 设置表头样式
				return 'table-header text-center'
			},
			cellStyle() { // 设置表格样式
				return 'text-center'
			},
			refreshDataList(){
				 console.log("a22")
				 this.showModal = false;
				 this.get_list();
			},

			get_list(){
				this.$http.post("users/lists",{page:this.page,limit:this.pagesize,search:this.search,operate_uid:this.value}).then((response) => {
					this.total=response.data.total;
					this.tableData=response.data.records;
					console.log(this.tableData)
				})
			},
			get_operateuers(){
				
				this.$http.post("common/operateuers",{}).then((response) => {
					// this.total=response.data.total;
					this.options=response.data.records;
					console.log(this.options)
				})
			},
			dosearch() {
				this.page=1;
				this.get_list();
            },
			loadData() {},
			pageChange(page) {
			
				this.page = page;
				this.get_list();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize = val;
			},
			deleHandle(id) {
                
                this.$confirm('确认删除已选记录, 是否继续?', '提示', { 
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids=[];
                    
                    ids.push(id)
                    this.axios.post('users/del', {id:ids}).then(response => {
                        if (response.code === 1) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            })
                            this.page = 1;
                            this.get_list();
                        } else {
                            this.$message({
                                type: 'error',
                                message: response.msg
                            })
                        }
                    })
                }).catch(() => {
                    console.log('取消退出');
                });
                
            },
			editHandle(id) {
				this.showModal = true;
				this.$nextTick(() => {
					this.$refs.myModal.init(id);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.account {

		.custom-table {
			margin-top: 20px;

			.btn-span {
				padding: 0 4px;
				font-size: 18px;
				cursor: pointer;
				color: #7D26CD;
			}
		}
	}
</style>
